<template>
  <div v-if="mediumData" class="medium-expand-container">
    <el-scrollbar class="edit-scroll-container">
      <div class="medium-expand-list">
        <!-- 基础信息 -->
        <div v-if="hasRouteAuth('medium:dataShow:baseInfo')" class="medium-expand-item" style="min-width: 155px; width: 155px !important; padding-left: 25px">
          <BaseInfo v-if="mediumData.baseInfo" :active-tabs="activeTabs" :base-info="mediumData.baseInfo" />
        </div>
        <!-- 分成保底及自定义字段信息 -->
        <div class="medium-expand-item" style="min-width: 300px;">
          <ProfitInfo v-if="mediumData.priceInfo" :active-tabs="activeTabs" :price-info="mediumData.priceInfo" />
        </div>
        <!-- 价格信息
        <div v-if="hasRouteAuth('medium:dataShow:priceInfo')" class="medium-expand-item" style="width: 232px;">
          <i v-if="hasEditAuth('priceInfo')" class="edit-info" @click="editInfoMaskShow(mediumData, 'priceInfo')" />
          <PriceInfo v-if="mediumData.priceInfo" :active-tabs="activeTabs" :price-info="mediumData.priceInfo" />
        </div> -->
        <!-- 通用报价项目
        <div v-if="hasRouteAuth('medium:dataShow:currencyPriceInfo')" class="medium-expand-item" style="width: 250px;">
          <i v-if="hasEditAuth('currencyPriceInfo')" class="edit-info" @click="editInfoMaskShow(mediumData, 'currencyPriceInfo')" />
          <CurrencyPriceInfo :active-tabs="activeTabs" :currency-price-info="mediumData.currencyPriceInfo" />
        </div> -->
        <!-- 有效价格时间区间 -->
        <div v-if="hasRouteAuth('medium:dataShow:effective')" class="medium-expand-item" style="min-width: 229px;">
          <i v-if="hasEditAuth('effective')" class="edit-info" @click="editInfoMaskShow(mediumData, 'priceTime')" />
          <PriceTime :active-tabs="activeTabs" :price-time="mediumData.priceTime" />
        </div>
        <!-- 票面信息 -->
        <div v-if="hasRouteAuth('medium:dataShow:invoiceInfo')" class="medium-expand-item" style="min-width: 202px;">
          <i v-if="hasEditAuth('invoiceInfo')" class="edit-info" @click="editInfoMaskShow(mediumData, 'invoiceInfo')" />
          <TableColumn :active-tabs="activeTabs" :data="mediumData.invoiceInfo" type="invoiceInfo" />
        </div>
        <!-- 数据信息 -->
        <div v-if="hasRouteAuth('medium:dataShow:datsInfo')" class="medium-expand-item" style="min-width: 119px;">
          <i v-if="hasEditAuth('datsInfo')" class="edit-info" @click="editInfoMaskShow(mediumData, 'dataInfo')" />
          <TableColumn :active-tabs="activeTabs" :data="mediumData.dataInfo" type="dataInfo" />
        </div>
        <!-- 备注 -->
        <div v-if="hasRouteAuth('medium:dataShow:remarks')" class="medium-expand-item" style="min-width: 128px;">
          <i v-if="hasEditAuth('remarks')" class="edit-info" @click="editRemarkMaskShow(mediumData)" />
          <div class="medium-data-remarks" style="margin-top: 5px;">
            <div class="title">备注：</div>
            <el-tooltip v-if="mediumData.remarks && mediumData.remarks.content && mediumData.remarks.content.length > 30" placement="top" effect="dark">
              <div slot="content" style="max-width: 300px;">{{ mediumData.remarks.content }}</div>
              <div class="content">{{ mediumData.remarks.content.substr(0, 30) }}...</div>
            </el-tooltip>
            <span v-else-if="mediumData.remarks" class="content">{{ mediumData.remarks.content || '--' }}</span>
          </div>
        </div>
        <!-- 案例 -->
        <div v-if="hasRouteAuth('medium:dataShow:cases')" class="medium-expand-item" style="min-width: 182px;">
          <i v-if="hasEditAuth('cases')" class="edit-info" @click="editCaseMaskShow(mediumData)" />
          <div class="title" style="font-size: 12px;margin-top: 5px;">案例：</div>
          <caseColumn v-if="mediumData.cases" :active-tabs="activeTabs" :data="mediumData.cases" />
        </div>
        <!-- 敏感信息 -->
        <div v-if="hasRouteAuth('medium:dataShow:sensitive')" class="medium-expand-item" style="min-width: 120px;">
          <i v-if="hasEditAuth('sensitive')" class="edit-info" @click="editInfoMaskShow(mediumData, 'sensitivityInfo')" />
          <div v-if="mediumData.sensitivityInfo" class="medium-data-item two-cell">
            <span class="title">所属机构:</span>
            <span :title="mediumData.sensitivityInfo.organization" class="name">{{ mediumData.sensitivityInfo.organization || '--' }}</span>
          </div>
          <div v-if="mediumData.sensitivityInfo" class="medium-data-item">
            <span class="title">商务联系人:</span>
            <span :title="mediumData.sensitivityInfo.businessContact" class="name">{{ mediumData.sensitivityInfo.businessContact || '--' }}</span>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { hasRouteAuth } from '@/utils/permission';
import BaseInfo from './baseInfo';
import PriceInfo from './priceInfo';
import CurrencyPriceInfo from './currencyPriceInfo';
import PriceTime from './priceTime';
import TableColumn from './tableColumn';
import caseColumn from './caseColumn';
import ProfitInfo from './profitInfo';
import { mapState } from 'vuex';
export default {
  components: { BaseInfo, PriceInfo, CurrencyPriceInfo, PriceTime, TableColumn, caseColumn, ProfitInfo },
  props: {
    activeTabs: {
      type: String,
      default: ''
    },
    mediumData: {
      type: Object,
      default: null
    }
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    hasRouteAuth,
    hasEditAuth(type) {
      /** 规则
       * 1、如果拥有全向编辑权限，则都可以编辑
       * 2、如果拥有部门全向权限，则自己部门的资源编辑
       * 3、如果拥有普通编辑权限，只有当自己存在于执行人列表时才可以编辑
       */
      return this.hasRouteAuth(`medium:dataEdit:${type}`) && (this.isOperation() || this.isDepartmentEdit(this.mediumData));
    },
    isOperation() { // 本人是否是执行人
      if (this.userInfo.userName === '管理员') return true;
      const userId = this.userInfo.id;
      const accountOperation = this.mediumData.accountOperation || [];
      const accountOperationIds = accountOperation.map(i => i.id);
      return accountOperationIds.includes(userId);
    },
    isDepartmentEdit(mediumData) { // 是否拥有全向权限
      if (this.hasRouteAuth('medium:dataEdit:admin')) return true; // 拥有全向权限则全部可以编辑
      if (this.hasRouteAuth('medium:dataEdit:department')) {
      // 如果拥有部门全向编辑，则本部门的资源可以编辑
        const deptName = this.userInfo.deptName;
        if (this.userInfo.userName === '管理员') return true;
        const departmentId = mediumData.attributionMatrix;
        const myDeptNameIds = deptName.map(i => {
          return i.id;
        });
        return myDeptNameIds.includes(departmentId);
      } else {
        return false;
      }
    },
    editCaseMaskShow(item) {
      this.$emit('editCaseMaskShow', item);
    },
    editRemarkMaskShow(item) {
      this.$emit('editRemarkMaskShow', item);
    },
    /*
    * 修改信息
    */
    // 弹出窗
    editInfoMaskShow(item, type) {
      this.$emit('editInfoMaskShow', { item, type });
    },
    // 修改完成后触发
    editInfoFun({ params, currentKeyword }) {
      this.$emit('editInfoFun', { params, currentKeyword });
    }
  }
};
</script>
<style lang="scss" scoped>
.medium-expand-container {
  padding-left: 37px;
  min-width: 800px;
  .edit-scroll-container {
    width: 100%;
    height: 100%;
    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: scroll;
      }
    }
  }
  .medium-expand-list {
    display: flex;
    overflow-x: hidden;
    // width: 1040px;
  }
  .medium-data-remarks {
    .title {
      font-size: 12px;
    }
    .content {
      word-break: break-all;
    }
  }
  .medium-expand-item {
    width: 166px;
    display: inline-block;
    position: relative;
    // border-right: 1px solid #EBEEFD;
    padding: 16px 10px 16px 0;
    &:hover {
      .edit-info {
        visibility: visible;
      }
    }
    &:last-child {
      border-right: none;
    }
  }
  .two-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  ::v-deep {
    .medium-data-item{
      margin-top: 5px;
      .title {
        font-size: 12px;
        color: #999999;
      }
      .name {
        color: #333333;
        font-size: 12px;
        word-break: break-all;
      }
      .link-name {
        display: inline-block;
        color: #406eff;
        img {
          position: relative;
          top: 1px;
          width: 11px;
          margin-left: 3px;
        }
        &:hover{
          color: #6e8fa2;
        }
        .el-icon-link {
          font-size: 12px;
        }
      }
    }
    .keep-all {
      word-break:keep-all;
    }
    .scroll-container {
      height: 100%;
      width: 100%;
    }
  }
}
.medium-expand-item {
  width: 166px;
  display: inline-block;
  position: relative;
  // border-right: 1px solid #EBEEFD;
  padding: 16px 10px 16px 0;
  &:hover {
    .edit-info {
      visibility: visible;
    }
  }
  &:last-child {
    border-right: none;
  }
}
.edit-info {
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 36px solid #EFF3FB;
  border-left: 36px solid transparent;
  visibility: hidden;
  z-index: 3;
  cursor: pointer;
  &::after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: -32px;
    right: 3px;
    background-image: url(../../../assets/medium/edit.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
</style>
